<html>
<head>
	
	<meta name="keywords" content="" />
	<meta name="description" content="" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	
	<title>Concert-Deals</title>
	
	<link type="text/css" href="style_sheet/style.css" rel="stylesheet" media="screen" />
	<link type="text/css" href="style_sheet/table.css" rel="stylesheet" media="screen" />
	<link type="text/css" href="jquery-ui/css/blitzer/jquery-ui-1.8.custom.css" rel="Stylesheet" />

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	<script type="text/javascript" src="jquery-ui/js/jquery-ui-1.8.custom.min.js"></script>
	<script type="text/javascript" src="flot/jquery.flot.js"></script>
	<script type="text/javascript" src="flot/excanvas.js" language="javascript"></script>
	<link type="text/css" href="theme/jquery.ui.all.css" rel="stylesheet" />
	<script type="text/javascript" src="jquery-1.4.2.js"></script>
	<script type="text/javascript" src="external/jquery.bgiframe-2.1.1.js"></script>
	<script type="text/javascript" src="ui/jquery.ui.core.js"></script>
	<script type="text/javascript" src="ui/jquery.ui.widget.js"></script>
	<script type="text/javascript" src="ui/jquery.ui.mouse.js"></script>
	<script type="text/javascript" src="ui/jquery.ui.draggable.js"></script>
	<script type="text/javascript" src="ui/jquery.ui.position.js"></script>
	<script type="text/javascript" src="ui/jquery.ui.resizable.js"></script>
	<script type="text/javascript" src="ui/jquery.ui.dialog.js"></script>
	<style>
		.ui-dialog-titlebar-close{
		    display: none;
		}
	</style>

	<script type="text/javascript">
	$(function() {

		$("#dialog-modal").dialog({
			height: 140,
			modal: true
		});
	});
	</script>



	<script type="text/javascript">	
		
		var eventList = [];
		var jsonData;
		
		$(document).ready(function() {
			$("#home_page").click(function(e){
					top.location.href = 'http://apps.facebook.com/concert-deals/'
			});
			$("#search_page").click(function(e){
					top.location.href = 'http://apps.facebook.com/concert-deals/concert_search'
			});
			$("#track_page").click(function(e){
					top.location.href = 'http://apps.facebook.com/concert-deals/view_tracks'
			});
			
			a = getUrlVars();
			$.post("/view_tracks",a, 

            function(data) {
				
				jsonData = data;
				
				var selectorHTML = "";
				for (var i = 0; i < data.length; ++i) {
					if (data[i].length > 0) {
						var eventID = data[i][0].eventID;
						var imageURL = data[i][0].imageURL;
						var eventURL = data[i][0].eventURL;
						
						var artist = data[i][0].artist;
						var venue = data[i][0].venue;
						var date = data[i][0].date;

						eventList.push(eventID);
						
						var description = artist + " at " + venue + " on " + date
						
						if (i == 0) selectorHTML += "<input type='radio' checked='checked' name='section' id ='"+i+"' value='"+eventID+"'/>";
						else selectorHTML += "<input type='radio' name='section' id ='"+i+"' value='"+eventID+"'/>";
						
						selectorHTML += "<a href='/concert_search?artist="+artist+"&venue="+venue+"&date="+date+"'>"+ description + "</a><br>";
					}
				}
				$("#eventselector").html(selectorHTML);
				
				var eventContainer = $("#eventselector");
				eventContainer.find("input").click(function(e) { 
					plotGraph(e.target.id);
				});
				
				if (data.length > 0) plotGraph(0);
				
				$("#dialog-modal").dialog('close');
			}, 'json');

			//id = id of radio button
			function plotGraph(id) {
				var data = jsonData;
				
				var i = id;

				var datasets = {};
									
				for (var j = 0; j < data[i].length; ++j) {
				
					var priceList = data[i][j].priceList;
					var dateList = data[i][j].dateList;
					var sectionName = data[i][j].sectionName;
					
					var dataPoints = [];
					for (var k = 0; k < priceList.length; ++k) {
					
						var time = Date.parse(dateList[k]);
						var price = parseInt(priceList[k]); 
						
						dataPoints[k] = [time, price];
					}
				
					datasets[sectionName] = {
						label: sectionName,
						data: dataPoints
					}
				}
				
				// hard-coded color indices to prevent colors from shifting
				// as options are selected/deselected
				var j = 0;
			    $.each(datasets, function(key, val) {
			        val.color = j;
			        ++j;
			    });
				
				// insert checkboxes 
			    var choiceContainer = $("#choices");
				choiceContainer.html("");
			    $.each(datasets, function(key, val) {
			        choiceContainer.append('<input type="checkbox" name="' + key +
			                               '" checked="checked" id="check">' +
			                               '<label for="check">'
			                                + val.label + '</label><br/>');
			    });
				
				// remove button
				//$("#removediv").html('<input type="submit" class="btn" id="remove" name="remove" value="Stop Tracking">')				
				
				function plotAccordingToChoices() {
			        var dt = [];
			
			        choiceContainer.find("input:checked").each(function () {
			            var key = $(this).attr("name");
			            if (key && datasets[key])
			                dt.push(datasets[key]);
			        });
			
			        if (dt.length > 0)
			            $.plot($("#graph"), dt, {
			                yaxis: {
								tickFormatter: function (val, axis) {return "$"+val;} 
							},
			                xaxis: { 
								tickDecimals: 0, 
								mode: "time",
								timeformat: "%y/%m/%d" + " %h:%M"
							},
							grid: { hoverable: true, clickable: true },
							series: {
			                    lines: { show: true },
			                    points: { show: true }
			                }
			            });
			    }
				
				choiceContainer.find("input").click(plotAccordingToChoices);
				
			    plotAccordingToChoices();
				
				function showTooltip(x, y, contents) {
			        $('<div id="tooltip">' + contents + '</div>').css( {
			            position: 'absolute',
			            display: 'none',
			            top: y + 5,
			            left: x + 5,
			            border: '1px solid #fdd',
			            padding: '2px',
			            'background-color': '#fee',
			            opacity: 0.80
			        }).appendTo("body").fadeIn(200);
			    }
			
			    var previousPoint = null;
			    $("#graph").bind("plothover", function (event, pos, item) {
			
		            if (item) {
		                if (previousPoint != item.datapoint) {
		                    previousPoint = item.datapoint;
		                    
		                    $("#tooltip").remove();
		                    var time = item.datapoint[0].toFixed(2);
		                    var price = item.datapoint[1].toFixed(2);
							var date = new Date();
							date.setTime(time);
							
							var toolTip = "<b>$" + parseInt(price) + "</b> for <b>" + item.series.label + "</b> on " + date.toLocaleString();  
							
		                    showTooltip(item.pageX, item.pageY, toolTip);
		                }
		            }
		            else {
		                $("#tooltip").remove();
		                previousPoint = null;            
		            }
			    });
			}
			
			$("#remove").live("click", function(e) {
				var eventID = $("#eventselector").find("input:checked").val() ;
				$.post("/remove_tracks?eventID="+eventID);
				window.location="/view_tracks";
			});
		})
		
		
		function getUrlVars()
		{
			    var vars = {};
			    var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
			    for(var i = 0; i < hashes.length; i++)
			    {
			        hash = hashes[i].split('=');
					
			        vars[hash[0]] = hash[1];
			    }
			    return vars;
		}
		
		function redir_main_page(){
			top.location.href = "http://apps.facebook.com/concert-deals";
		}
		
	</script>
	
</head>
<body>
	
	<div id="dialog-modal" title="Plotting Graph...">
		<center><img aliign= "center" src="jquery-ui/images/ajax-loader.gif" /></center>
	</div>
	
	<div class="hiddenInViewSource" style="padding:20px;">
		<!-- end #header -->
		<div id="menu">
			<ul>
				<li><a href="#" id="home_page">Home</a></li>
				<li><a href=# id="search_page">Search</a></li>
				<li class="first"><a href=# id="track_page">Tracks</a></li>
			</ul>
		</div>
		<!-- end #menu -->
		
		<div id="wrapper">
		<div class="btm">
		<div id="page">
		
		<div id="eventselector"></div>
	
		<div id="graph" style="width:600px;height:400px;float:left"></div>
		
		<div id="choices"></div>
		
		<div id="removediv"></div>
	
		</div>
		</div>
		</div>
	</div>

</body>
</html>